<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="/static/user/css/reset.css">
    <link rel="stylesheet" href="/static/user/css/common.css">
    <link rel="stylesheet" href="/static/user/css/cart1.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2075499_hkggbre7wq.css">
    <script src="/static/user/js/jquery-3.4.1.js"></script>
    <script src="/static/user/js/cart1.js"></script>
    <style>
        a{
            text-decoration: none !important;
        }
        #ECS_MEMBERZONE a{
            color: #ffffff;
        }
        /* 陈锦添修改 */
        .mask{
            position: fixed;
            background-color: rgba(0,0,0,.5);
            width: 100%;
            height: 100%;
            display: none;
            z-index: 100;
        }
        .userinfo-container{
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            font-size: 15px;
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #eeeeee;
        }
        .userinfo{
            margin-bottom: 25px;
        }
        input[type="radio"]{
            cursor: pointer;
        }
        .name-tel{
            display: inline-block;
        }
        .name-tel span{
            margin-right: 80px;
        }
        .addr{
            margin: 2px 0 2px 25px;
        }
        .confirm-addr-btn{
            border: 1px solid #000000;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 5px;
            background-color: #cccccc;
            cursor: pointer;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #user{
            height: 100px;
            background-color: #f1f1f1;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            text-align: left;
        }
        #user span{
            margin-right: 150px;
        }
        #user .addr{
            margin-left: 0;
        }
        .modify-addr-btn{
            border: 1px solid #000000;
            background-color: #cccccc;
            padding: 5px;
            border-radius: 5px;
            box-sizing: border-box;
            position: absolute;
            bottom: 10px;
            right: 10px;
            cursor: pointer;
        }
        #price-total{
            text-align: right;
        }
    </style>

</head>
<body>
<div class="mask">
    <div class="userinfo-container">
        {volist name="addresses" id="a"}
        <div class="userinfo">
            <input type="radio" name="address" onclick="control(this);">
            <div class="name-tel">
                收货人：<span>{$a.receiver}</span>
                联系方式：<span>{$a.phone}</span>
            </div>
            <div class="addr">收货地址：<span>{$a.address}</span></div>
        </div>
       {/volist}
        <button class="confirm-addr-btn" onclick="confirmedAddr();">确认收货信息</button>
    </div>
</div>
<div id="header">
    <div id="userinfo_bar" class="hd_bar">
        <div class="bd">
            <div class="left-side left clearfix">
                <div class="left-side-item logo">
                    <img src="/static/user/images/xsSchool.png" alt="">
                </div>
                <div id="ECS_MEMBERZONE" class="left-side-item hdlbar">
                    <a href="/">莞工零食商城首页</a>
                </div>
            </div>
            <div class="right-side">
                <li class="right-side-item ">
                    <span>1</span>我的购物车
                    <i class="iconfont icon-sanjiaoxing_shang"></i>
                </li>
                <li class="right-side-item arrow">
                </li>
                <li class="right-side-item focuson">
                    <span>2</span>确认订单信息
                    <i class="iconfont icon-sanjiaoxing_shang"></i>
                </li>
                <li class="right-side-item arrow">
                </li>
                <li class="right-side-item">
                    <span>3</span>成功提交订单
                    <i class="iconfont icon-sanjiaoxing_shang"></i>
                </li>
            </div>
        </div>
    </div>
</div>
<div id="main">
    <form action="MtAliPay" method="post">
        <input type="hidden" name="price" value="{$sum_price}">
        <div class="top-next cle clearfix">
            <div id="cart-box" class="cart-box">
                <div class="hd">
                    <span id="itemsnum-top" class="no2"><strong id="total_num">{$total_num}</strong>件商品</span>
                    <span class="no4">单价</span>
                    <span>数量</span>
                    <span>小计</span>
                </div>
                <div class="goods-list">
                    <ul>

                        {if $arr!=1}
                        {volist name="$arr" id="a"}
                        <li class="cle hover re" style="border-bottom-style: none;">
                            <input type="hidden" name="id" value="{$a.id}" class="goods_id">
                            <div class="pic"><a href="javascript:;" target="_blank"><img src="/static/admin/uploads/{$a.thumb}" alt="澳洲肥牛套餐"></a></div>
                            <div class="name">
                                <a href="">
                                    {$a.goods_name}
                                    <span style="color: #ff0000"></span>
                                </a>
                                <p></p>
                            </div>
                            <div class="price-xj" style="position: relative;">
                                <p style="position: absolute;top: 0px">
                                    <span>￥</span><em class="price">{$a.sale_price}</em><span>元</span>
                                </p>
                            </div>
                            <div class="nums">
                                <p style="position: absolute;top: 0px">
                                    <em style="position: absolute;left: 30px" class="price">{$a.num}</em>
                                </p>
                            </div>

                            <div class="price-xj">
                                <span>￥</span><em class="totle_items_34">{$a.total_price}</em><span>元</span>
                            </div>


                        </li>

                        {/volist}
                        {/if}

                    </ul>

                </div>
                <div class="fd clearfix">
                    <!-- class="fd" -->
                    <div id="price-total">
                        <!-- class="fr" -->
                        <p><span id="selectedCount">{$total_num}</span>件商品,总价: <span class="red"><strong id="totalSkuPrice">{$sum_price}</strong></span></p>
                        <!--  <p><a href="" class="btn">提交订单</a></p>-->
                        <!-- 收货地址的修改和确认 -->
                        <div id="user">
                            <div class="name-tel">
                                收货人：<span><input type="hidden" name="receiver" value="{$oneaddress.receiver}">{$oneaddress.receiver}</span>
                                联系方式：<span><input type="hidden" name="phone" value="{$oneaddress.phone}">{$oneaddress.phone}</span>
                            </div>
                            <div class="addr">
                                收货地址：<span><input type="hidden" name="address" value="{$oneaddress.address}">{$oneaddress.address}</span>
                            </div>
                            <div class="modify-addr-btn" onclick="modifyAddr();">修改收货地址</div>
                        </div>
                        <p class="right clearfix"><input type="hidden" name="orderid" value="{$orderid}"><input style="height: 35px; cursor: pointer;" class="btn" type="submit" value="提交订单"></p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- 楚雄零食商城页尾 -->
{include file="common/footer"}
<!-- 回到顶部 -->
<a class="ret" onclick="backtoTop();">
    <img src="/static/user/images/gotop.png" alt="">
</a>

</body>
<script src="/static/user/js/jquery-3.4.1.js"></script>
<script>
    // 确认收货地址按钮
    function confirmedAddr(){
        $('.mask').css('display','none');
    }
    // 修改收货地址按钮
    function modifyAddr(){
        $('.mask').css('display','block');
    }
    function control(_this){
        $('#user .name-tel').find('span').eq(0).html(`<input type="hidden" name="receiver" value="`+ $(_this).siblings('.name-tel').find('span').eq(0).text() +`">`+ $(_this).siblings('.name-tel').find('span').eq(0).text() +``);
        $('#user .name-tel').find('span').eq(1).html(`<input type="hidden" name="phone" value="`+ $(_this).siblings('.name-tel').find('span').eq(1).text() +`">`+ $(_this).siblings('.name-tel').find('span').eq(1).text() +``);
        $('#user .addr').find('span').eq(0).html(`<input type="hidden" name="address" value="`+ $(_this).siblings('.addr').find('span').eq(0).text() +`">`+ $(_this).siblings('.addr').find('span').eq(0).text() +``)
    }
</script>
</html>